import { Paper } from "@mui/material";
import { useSelector } from "react-redux";


function ProgressPanel(prosp) {
    const { children } = prosp;
    const open = useSelector(state => state.progressReducer.open)
    const style = {
        position: 'fixed',
        right: {xs:0, md:16},
        bottom: {xs:open === true ? 0 : -350, md:open === true ? 16 : -450},
        width:{xs:'100vw', md:400}, 
        height:{xs:350, md:450},
        zIndex:9
    }
    return (
        <Paper elevation={4} sx={style}>
            { children }
        </Paper>
    )
}

export default ProgressPanel;